<template>
  <avue-form ref="form"
             v-model="form"
             :option="option">
    <template #menu-form="{}">
      <el-button icon="el-icon-user"
                 type="primary"
                 @click="handleSubmit">提 交</el-button>
      <el-button icon="el-icon-delete"
                 @click="handleEmpty">清 空</el-button>
    </template>
  </avue-form>
</template>

<script>
export default {
  data () {
    return {
      form: {},
      option: {
        emptyBtn: false,
        submitBtn: false,
        column: [{
          label: "用户名",
          prop: "username",
          rules: [{
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }]
        }]
      }
    }
  },
  methods: {
    handleEmpty () {
      this.$refs.form.resetForm();
    },
    handleSubmit () {
      this.$refs.form.validate((valid, done, msg) => {
        if (valid) {
          this.$message.success(JSON.stringify(this.form));
          setTimeout(() => {
            done()
          }, 2000)
        }
      })
    }
  }
}
</script>